<!DOCTYPE html>

<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="baidu-site-verification" content="GOgEP8c1pN"/>
  

  <title>
    标签云_Django博客教程_追梦人物的博客</title>

  <link href="font-awesome.min.css"
        rel="stylesheet">
  <link rel="stylesheet" href="mobi.min.css">
  <link rel="stylesheet" href="modal.min.css">
  <link rel="stylesheet" href="friendly.css">
  <link rel="stylesheet" href="blog.css?v0.12">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="/static/blog/js/menu.js"></script>
  <script src="/static/blog/js/modal.min.js"></script>
  <script src="/static/blog/js/blog.js"></script>
  

  
    <script>
        // baidu statistics
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?fb59b2a6022bccc02671a750f61c356b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // baidu auto push
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
    
  
</head>
<body class="bg-light">
<header>
  <nav class="flex-center bg-white nav-bar">
    <div class="container-wider flex-middle">
      
  <a class="show-on-mobile nav-link m-5" id="js-sidebar-btn" href="#" role="button">
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </a>

      <a class="nav-bar-logo mr-7" href="/">
        <img src="/static/blog/images/logo.png" alt="blog logo">
      </a>
      <ul class="unit-0 hide-on-mobile nav-bar-nav">
        <li class="nav-item mr-7">
          <a class="nav-link" href="/">首页</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/tutorials/">教程</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/categories/">分类</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/archives/">归档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/donate/">赞助</a>
        </li>
      </ul>
      <div class="unit flex-right flex-middle">
        <form class="hide-on-mobile flex-left flex-middle search-form mr-5" id="search-form"
              action="/search/">
          <input class="unit" type="search" name="q" placeholder="搜索..."/>
          <button class="unit-0" type="submit" role="button">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
        </form>
        <a class="show-on-mobile nav-link fs-7 mr-7" id="js-search-btn" href="#" role="button">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="flex-middle notification">
          
            <a class="nav-link" href="/accounts/login/">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
            </a>
          
        </div>
        <div class="show-on-mobile flex-middle">
          <a class="nav-link fs-7 ml-7 mr-5" id="menu-toggle" href="#">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </a>
          <ul class="menu bg-white" data-menu data-menu-toggle="#menu-toggle">
            <li class="nav-item mr-7">
              <a class="nav-link" href="/">首页</a>
            </li>
            <li>
              <a href="/tutorials/">教程</a>
            </li>
            <li>
              <a href="/categories/">分类</a>
            </li>
            <li>
              <a href="/archives/">归档</a>
            </li>
            <li>
              <a href="/donate/">赞助</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="flex-center">
  <div class="container-wider">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">设置评论回复接收邮箱</h4>
            <div class="text-primary mt-2">邮箱仅用于接收回复提醒，不会被公开。</div>
            
          </div>
          <div class="modal-body">
            <form class="form email-binding-form" action="/comments/ajax_email_binding/">
              <div class="message">
                <span class="text-danger"></span>
              </div>
              <input type='hidden' name='csrfmiddlewaretoken' value='hEODzm5mAEIzpzgbqOj3aiBNlwVa1086onxvXgHR9aGWVsq8NiGtKAIK4JBAPIn0' />
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">邮箱: </label>
                <div class="unit">
                  <input type="email" name="email" id="id_email" placeholder="请输入绑定邮箱"/>
                </div>
                <div class="unit-0">
                  <button class="btn" id="js-send" type="button"
                          data-target="/comments/ajax_verification_code/">发送验证码
                  </button>
                </div>
              </div>
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">验证码: </label>
                <div class="unit">
                  <input type="text" name="verification_code" id="id_verification_code"
                         placeholder="请输入接收到的验证码"/>
                </div>
              </div>
              <div class="flex-right">
                <button type="button" class="btn btn-danger mr-3" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="js-submit">设置</button>
              </div>
            </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="flex-left flex-wrap "
         style="margin-top: 60px">
      
  <aside class="unit-1-4 unit-1-on-mobile top-gap">
    <div class="scroll-view bg-white card toc-sidebar" style="height: 100%">
      <div class="card-header">
        目录
      </div>
      <div class="flex-left">
        <div class="unit-1-4">
          <a href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp" target="_blank"><img
              src="/static/blog/images/aliyun.jpg" alt=""></a>
        </div>
        <div class="unit-1-2 flex-vertical top-gap text-small">
          <a style="color: #e83e8c" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">云服务器新用户</a>
          <a style="color: #6610f2" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">8元/月</a>
        </div>
      </div>
      <div class="card-body">
        <ul>
          <li>
            <h6 class="top-gap-0"><a href="">Django博客教程</a></h6>
            <ul>
              
                <li>
                  <a href="2.html">前言</a>
                  
                </li>
              
                <li>
                  <a href="3.html">搭建开发环境</a>
                  
                </li>
              
                <li>
                  <a href="4.html">建立 Django 博客应用</a>
                  
                </li>
              
                <li>
                  <a href="5.html">创建 Django 博客的数据库模型</a>
                  
                </li>
              
                <li>
                  <a href="6.html">让 Django 完成翻译：迁移数据库</a>
                  
                </li>
              
                <li>
                  <a href="7.html">Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="8.html">真正的 Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="9.html">在 Django Admin 后台发布文章</a>
                  
                </li>
              
                <li>
                  <a href="10.html">博客文章详情页</a>
                  
                </li>
              
                <li>
                  <a href="11.html">支持 Markdown 语法和代码高亮</a>
                  
                </li>
              
                <li>
                  <a href="12.html">页面侧边栏：使用自定义模板标签</a>
                  
                </li>
              
                <li>
                  <a href="13.html">分类与归档</a>
                  
                </li>
              
                <li>
                  <a href="14.html">评论</a>
                  
                </li>
              
                <li>
                  <a href="16.html">已知小问题修正</a>
                  
                </li>
              
                <li>
                  <a href="20.html">使用 Nginx 和 Gunicorn 部署 Django 博客</a>
                  
                </li>
              
                <li>
                  <a href="21.html">使用 Fabric 自动化部署</a>
                  
                </li>
              
                <li>
                  <a href="29.html">统计文章阅读量</a>
                  
                </li>
              
                <li>
                  <a href="32.html">自动生成文章摘要</a>
                  
                </li>
              
                <li>
                  <a href="33.html">基于类的通用视图：ListView 和 DetailView</a>
                  
                </li>
              
                <li>
                  <a href="34.html">Django Pagination 简单分页</a>
                  
                </li>
              
                <li>
                  <a href="37.html">Django Pagination 完善分页</a>
                  
                </li>
              
                <li>
                  <a href="38.html">统计各个分类下的文章数</a>
                  
                </li>
              
                <li>
                  <a href="39.html">标签云</a>
                  
                    <div class="toc">
<ul>
<li><a href="#获取标签列表">获取标签列表</a></li>
<li><a href="#显示某个标签下的文章列表">显示某个标签下的文章列表</a><ul>
<li><a href="#标签视图函数">标签视图函数</a></li>
<li><a href="#模板">模板</a></li>
<li><a href="#绑定-url">绑定 URL</a></li>
<li><a href="#设置标签跳转链接">设置标签跳转链接</a></li>
</ul>
</li>
<li><a href="#在文章详情页显示标签">在文章详情页显示标签</a></li>
<li><a href="#总结">总结</a></li>
</ul>
</div>

                  
                </li>
              
                <li>
                  <a href="41.html">RSS 订阅</a>
                  
                </li>
              
                <li>
                  <a href="43.html">Markdown 自动生成文章目录</a>
                  
                </li>
              
                <li>
                  <a href="44.html">简单全文搜索</a>
                  
                </li>
              
                <li>
                  <a href="45.html">Django Haystack 全文检索与关键词高亮</a>
                  
                </li>
              
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </aside>

      
  <div class="unit-3-4 unit-1-on-mobile top-gap">
    


<div class="bg-white card post-card px-7 py-5">
  
<article class="post">
  <h1 class="top-gap-0">标签云</h1>
  <ul class="list-inline dot-divider post-meta">
    <li class="list-inline-item text-small text-muted">
      10 月前
    </li>
    <li class="list-inline-item text-small text-muted">4393 字
    </li>
    <li class="list-inline-item text-small text-muted">
      7004 阅读
    </li>
    <li class="list-inline-item text-small text-muted">
      26 评论
    </li>
  </ul>
  <div class="top-gap-big post-body">
    <p>我们博客的文章（Post）模型除了通过 ForeignKey 关联了 Category（分类）外，还通过 ManyToMany 关联了 Tag（标签）。在我们的 <a href="http://demo.zmrenwu.com/">Demo</a> 的侧边栏可以看到一个标签云效果的全部标签列表。现在我们来给博客实现这个效果，让 Django 从数据库中获取全部标签的数据列表，然后在模板中显示它们，并且点击相应的标签，就可以显示该标签下的全部文章列表。</p>
<h2 id="获取标签列表">获取标签列表</h2>
<p>很明显的能够发现，标签和之前我们开发的分类功能是十分类似的，唯一的不同是一篇文章（Post）只能指定一个分类，但是却可以指定多个标签。回顾一下我们获取博客侧边栏的分类列表时是怎么做的呢？我们自定义了一个模板标签函数 <code>get_categories</code>。具体的代码是：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">templatetags</span><span class="o">/</span><span class="n">blog_tags</span><span class="o">.</span><span class="n">py</span>

<span class="nd">@register.simple_tag</span>
<span class="k">def</span> <span class="nf">get_categories</span><span class="p">():</span>
    <span class="c1"># 记得在顶部引入 count 函数</span>
    <span class="k">return</span> <span class="n">Category</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">annotate</span><span class="p">(</span><span class="n">num_posts</span><span class="o">=</span><span class="n">Count</span><span class="p">(</span><span class="s1">&#39;post&#39;</span><span class="p">))</span><span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">num_posts__gt</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
</pre></div>


<p>然后我们在模板中使用这个模板标签获取到文章数大于 0 的分类列表，并渲染显示它。</p>
<div class="codehilite"><pre><span></span>templates/base.html

<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget widget-category&quot;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget-title&quot;</span><span class="p">&gt;</span>分类<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
  {% get_categories as category_list %}
  <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
    {% for category in category_list %}
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{% url &#39;blog:category&#39; category.pk %}&quot;</span><span class="p">&gt;</span>{{ category.name }}
        <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-count&quot;</span><span class="p">&gt;</span>({{ category.num_posts }})<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
      <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    {% empty %}
    暂无分类！
    {% endfor %}
  <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>


<p>事实上，标签云的实现方法和分类列表完全一样。我们定义一个 <code>get_tags</code> 模板标签，获取到文章数大于 0 的标签列表，然后在模板中渲染显示它。代码如下，你可以看到代码和分类功能的代码几乎是一样的，只是把 Category（分类）换成了 Tag（标签）。</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">templatetags</span><span class="o">/</span><span class="n">blog_tags</span><span class="o">.</span><span class="n">py</span>

<span class="kn">from</span> <span class="nn">..models</span> <span class="kn">import</span> <span class="n">Post</span><span class="p">,</span> <span class="n">Category</span><span class="p">,</span> <span class="n">Tag</span>

<span class="nd">@register.simple_tag</span>
<span class="k">def</span> <span class="nf">get_tags</span><span class="p">():</span>
    <span class="c1"># 记得在顶部引入 Tag model</span>
    <span class="k">return</span> <span class="n">Tag</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">annotate</span><span class="p">(</span><span class="n">num_posts</span><span class="o">=</span><span class="n">Count</span><span class="p">(</span><span class="s1">&#39;post&#39;</span><span class="p">))</span><span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">num_posts__gt</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
</pre></div>


<p>然后在模板中循环显示这些标签：</p>
<div class="codehilite"><pre><span></span>templates/base.html

<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget widget-tag-cloud&quot;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget-title&quot;</span><span class="p">&gt;</span>标签云<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
  {% get_tags as tag_list %}
  <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
    {% for tag in tag_list %}
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>{{ tag.name }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    {% empty %}
    暂无标签！
    {% endfor %}
  <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>


<p>关于自定义模板标签以及使用方法，请参考 <a href="http://zmrenwu.com12.html">页面侧边栏：使用自定义模板标签</a>。</p>
<p>OK 了！在 Django 后台添加一些标签，并且为发表的文章指定这些标签，就可以看到博客的侧边栏显示出这些标签了。</p>
<h2 id="显示某个标签下的文章列表">显示某个标签下的文章列表</h2>
<p>同样的，显示某个标签下的文章列表和我们之前做的点击分类后显示该分类下的文章列表是一样的。回顾一下显示分类下的文章列表时的做法，经典的 Django 三部曲。首先是定义视图函数，然后编写模板文件，最后将视图函数和 URL 模式绑定。标签和分类是完全一样的步骤，因此稍微修改一下分类相关的代码就可以用于标签了。</p>
<h3 id="标签视图函数">标签视图函数</h3>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">views</span><span class="o">.</span><span class="n">py</span>

<span class="k">class</span> <span class="nc">TagView</span><span class="p">(</span><span class="n">ListView</span><span class="p">):</span>
    <span class="n">model</span> <span class="o">=</span> <span class="n">Post</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s1">&#39;blog/index.html&#39;</span>
    <span class="n">context_object_name</span> <span class="o">=</span> <span class="s1">&#39;post_list&#39;</span>

    <span class="k">def</span> <span class="nf">get_queryset</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="n">tag</span> <span class="o">=</span> <span class="n">get_object_or_404</span><span class="p">(</span><span class="n">Tag</span><span class="p">,</span> <span class="n">pk</span><span class="o">=</span><span class="bp">self</span><span class="o">.</span><span class="n">kwargs</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;pk&#39;</span><span class="p">))</span>
        <span class="k">return</span> <span class="nb">super</span><span class="p">(</span><span class="n">TagView</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">get_queryset</span><span class="p">()</span><span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">tags</span><span class="o">=</span><span class="n">tag</span><span class="p">)</span>
</pre></div>


<p>和 <code>CategoryView</code> 一样，我们使用了类视图。代码几乎和 <code>CategoryView</code>  是一样的，因此这里不再详细说明，具体请参考 <code>CategoryView</code>  部分的代码和说明 <a href="http://zmrenwu.com33.html">基于类的通用视图：ListView 和 DetailView</a>。</p>
<h3 id="模板">模板</h3>
<p>由于显示的是文章列表，因此我们直接复用了用于显示文章列表的 index.html 模板。</p>
<h3 id="绑定-url">绑定 URL</h3>
<p>同样的，URL 模式和分类也是完全类似的，这里不再多做解释：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">urls</span><span class="o">.</span><span class="n">py</span>

<span class="n">app_name</span> <span class="o">=</span> <span class="s1">&#39;blog&#39;</span>
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="p">[</span>
    <span class="c1"># 其它 URL 模式...</span>
    <span class="n">url</span><span class="p">(</span><span class="sa">r</span><span class="s1">&#39;^category/(?P&lt;pk&gt;[0-9]+)/$&#39;</span><span class="p">,</span> <span class="n">views</span><span class="o">.</span><span class="n">CategoryView</span><span class="o">.</span><span class="n">as_view</span><span class="p">(),</span> <span class="n">name</span><span class="o">=</span><span class="s1">&#39;category&#39;</span><span class="p">),</span>
    <span class="n">url</span><span class="p">(</span><span class="sa">r</span><span class="s1">&#39;^tag/(?P&lt;pk&gt;[0-9]+)/$&#39;</span><span class="p">,</span> <span class="n">views</span><span class="o">.</span><span class="n">TagView</span><span class="o">.</span><span class="n">as_view</span><span class="p">(),</span> <span class="n">name</span><span class="o">=</span><span class="s1">&#39;tag&#39;</span><span class="p">),</span>
<span class="p">]</span>
</pre></div>


<h3 id="设置标签跳转链接">设置标签跳转链接</h3>
<p>设置一下标签的超链接，这样点击标签后就可以跳转到该标签下的文章列表页面了。这里用到了 {% url %} 模板标签，其用法和分类的超链接一模一样，这里就不再过多解释，请参考上边给出的一些文章。</p>
<div class="codehilite"><pre><span></span><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{% url &#39;blog:tag&#39; tag.pk %}&quot;</span><span class="p">&gt;</span>{{ tag.name }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</pre></div>


<h2 id="在文章详情页显示标签">在文章详情页显示标签</h2>
<p>上边获取的是全部标签的列表，当在文章详情页面时，我们希望显示的这篇文章所属的标签，具体该怎么做呢？这里我只说明几个关键的点，然后给出一个大致的实现思路。既然你已经通过教程学习到了这里，相信你对 Django 已经有了一定了解了，根据提示并稍加思考，相信你一定可以很好地完成这个功能。</p>
<p>首先来回顾一下文章（Post） 和标签（Tag）的模型：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">models</span><span class="o">.</span><span class="n">py</span>

<span class="k">class</span> <span class="nc">Post</span><span class="p">(</span><span class="n">models</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
    <span class="n">title</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">70</span><span class="p">)</span>
    <span class="n">body</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">TextField</span><span class="p">()</span>
    <span class="n">category</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">ForeignKey</span><span class="p">(</span><span class="s1">&#39;Category&#39;</span><span class="p">)</span>
    <span class="n">tags</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">ManyToManyField</span><span class="p">(</span><span class="n">Tag</span><span class="p">,</span> <span class="n">blank</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>
    <span class="c1"># 其它属性...</span>

    <span class="k">def</span> <span class="fm">__str__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="k">return</span> <span class="bp">self</span><span class="o">.</span><span class="n">title</span>

<span class="k">class</span> <span class="nc">Tag</span><span class="p">(</span><span class="n">models</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
</pre></div>


<p>可以看到 <code>Post</code> 下有一个 <code>tags</code> 属性，这个属性通过多对多的关系关联着 <code>Tag</code>。回顾一下我们是如何获取某篇文章 post 对应的分类的？我们直接通过访问 <code>category</code> 属性来获得分类，即通过 <code>post.categoty</code> 来获取 post 的分类。那要获得某篇文章 post 对应的标签，可不可以通过 <code>post.tags</code> 来获取呢？思路是正确的，不过和获取分类稍微有点不同。由于 <code>Post</code> 和 <code>Categoty</code> 是一对多的关系（ForeignKey），所以 <code>post.categoty</code> 是唯一的。但是 <code>Post</code> 和 <code>Tag</code> 是多对多的关系（ManyToManyField），那么 <code>post.tags</code> 就有可能有多个值。所以 Django 没有让  <code>post.tags</code> 返回全部标签，而是返回了一个模型管理器（类似于 objects），然后我们可以调用这个模型管理器的 <code>all</code> 方法，来获取这篇 post 下的全部标签列表了。</p>
<p>因此大体思路就清晰了，我们可以在文章的详情页模板中，通过 <code>post.tags.all()</code> 获取到这篇 post 下的标签列表。但是要注意模板中调用方法需要去掉括号，类似于：</p>
<div class="codehilite"><pre><span></span>{% for tag in post.tags.all %}
    {{ tag.name }}
{% endfor %}
</pre></div>


<p>具体的代码编写就当做练习交给你了，如果自己实在无法独立解决，可以参考下方给出的 GitHub 分支中的相关代码。</p>
<h2 id="总结">总结</h2>
<p>本章节的代码位于：<a href="https://github.com/zmrenwu/django-blog-tutorial/tree/Step22_tag-cloud">Step22: tag cloud</a>。</p>
<p>如果遇到问题，请通过下面的方式寻求帮助。</p>
<ul>
<li>简单问题在下方评论区留言。</li>
<li>在 <a href="http://www.pythonzh.cn/category/newbie-qa/">Pythonzhcn 社区的新手问答版块</a> 发布帖子。</li>
</ul>
    <p class="text-center">
      -- EOF --
    </p>
    <div>
      <button class="btn btn-primary" id="js-reward"><i class="fa fa-jpy"
                                                        aria-hidden="true"></i>
        如果觉得文章对你有帮助，请随意打赏
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="flex-left flex-wrap units-gap-big mt-4" style="display: none">
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/weixinpay.jpg" alt="微信支付收款二维码"
                 style="width: 250px">
            <figcaption class="text-center fs-6 mt-2" style="color: green">微信</figcaption>
          </figure>
        </div>
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/alipay.jpg" alt="支付宝收款二维码" style="width: 250px">
            <figcaption class="text-center fs-6 mt-2 text-primary">支付宝</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="post-tags">
      <ul class="list-inline">
        
      </ul>
    </div>
  </div>
</article>
  <div class="top-gap">
    <div class="jiathis_style">
      <span class="jiathis_txt">分享到：</span>
      <a class="jiathis_button_qzone">QQ空间</a>
      <a class="jiathis_button_tsina">新浪微博</a>
      <a class="jiathis_button_tqq">腾讯微博</a>
      <a class="jiathis_button_weixin">微信</a>
      <a href="http://www.jiathis.com/share?uid=2128865"
         class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
         target="_blank">更多</a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript">
        var jiathis_config = {data_track_clickback: 'true'};
    </script>
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2128865"
            charset="utf-8"></script>
    <!-- JiaThis Button END -->
  </div>
  <br>
  <div class="top-gap clearfix">
    
      <a href="38.html">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
        统计各个分类下的文章数
      </a>
    
    
      <a class="float-right" href="41.html">
        RSS 订阅
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </a>
    
  </div>
  

  <section class="comment-area top-gap-big" id="comment-area">
    <h5>26 条评论 / 13 人参与</h5>
    
      
<div class="flex-center top-gap login-panel p-7">
  <div>
    <div class="text-muted text-center login-header"><span>登录后回复</span></div>
    <div class="flex-center text-center social-icons mt-3">
                        <span class="weibo mr-3">
                            <a href="/accounts/weibo/login/">
                                <i class="fa fa-weibo" aria-hidden="true"></i>
                            </a>
                        </span>
      <span class="github">
                            <a href="/accounts/github/login/">
                                <i class="fa fa-github" aria-hidden="true"></i>
                            </a>
                        </span>
    </div>
  </div>
</div>
    
    <div class="top-gap-big comment-list">
  
    <div class="flex-left py-4" id="c2257">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/30833807?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">huazhaozhe
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style="">&nbsp; <img alt="Image" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D452/sign=74d72811cc134954611ee961644f92dd/d31b0ef41bd5ad6ef7ccf47a86cb39dbb6fd3c6c.jpg" width="867" height="452"></p><p style=""><br></p><p>我要怎么登出账号...<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">1 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2257"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c2030">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/19517134?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiaominghe
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>作者你好，我问个问题，admin提交文章时，tag为啥无法选择呢，强制是全部选择的，有几个tag就强制选择几个tag？</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">3 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2030"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c2032">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/19517134?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiaominghe
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiaominghe
        

  </header>
  <div class="comment-body">
    <p>已解决。。。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">3 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2032"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c2220">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/20856110?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">huangjing2016
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">qiaominghe
        

  </header>
  <div class="comment-body">
    <p>麻烦问下你出现这种情况的原因是什么，怎么解决的</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2220"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c2221">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/19517134?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">qiaominghe
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">huangjing2016
        

  </header>
  <div class="comment-body">
    <p>我记得是个小问题，具体怎么操作的我忘了，你检查下你的代码吧</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2221"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1979">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax1.sinaimg.cn/crop.0.0.749.749.180/71a6ff9cly8fhn97spg89j20ku0kt3za.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">金仙伸
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>return super(TagView, self).get_queryset().filter(<span style="color: rgb(227, 55, 55);">tags=tag</span>)<br></p><p>这个tags字段是多对多的关系&nbsp; &nbsp;这样直接用等号匹配 会不会有问题？</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">3 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1979"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1701">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/5253917?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">陈振兴
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style="">请问博主,在博客列表页,比如 首页,附加每篇博文的标签该如何做?给个思路就好,谢谢.<br><br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1701"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1702">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/5253917?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">陈振兴
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">陈振兴
        

  </header>
  <div class="comment-body">
    <p style="">见笑了,跟detail页面一样调用就好.<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1702"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1631">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.1006.1006.180/006uVEqXly8fiq44i2a17j30ry0rygp9.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">江洋林澜
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主，我已经在文章详情页模板写上了</p><p>{% for tag in post.tags.all %}</p><p>&nbsp; &nbsp; {{ tag.name }}</p><p>{% endfor %}</p><p>为什么文章详情页标签还是显示的主页的标签云呢？</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1631"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1639">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">江洋林澜
        

  </header>
  <div class="comment-body">
    <p>极有可能是你的主页内容和详情内容模板搞混。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1639"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1641">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.1006.1006.180/006uVEqXly8fiq44i2a17j30ry0rygp9.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">江洋林澜
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    <p>我的确是在detail.html上改的，但是它显示的好像还是base.html的内容</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1641"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1642">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tvax4.sinaimg.cn/crop.0.0.1006.1006.180/006uVEqXly8fiq44i2a17j30ry0rygp9.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">江洋林澜
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    <p>已经解决了，谢谢博主。提个小建议，教程里面关于前端模板的修改可以写详细一点，我对比github的代码发现自己写的还是有些差别的。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1642"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1558">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/16460370?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">William Han
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>首先感谢博主的分享，博主的教程细致入微，每个细节都点到了，受益匪浅。</p><p>其次有个问题要请教：本文中类视图TagView继承自ListView，为什么不选择继承自己实现的IndexView呢？这样不是还能具备分页功能吗。<br><br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1558"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1514">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva1.sinaimg.cn/crop.0.0.480.480.180/afaf9a28jw8ezq7lq7gdvj20dc0dcmzl.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">RemeLL
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>No module named 'mdx_markdown'<br></p><p>突然进文章详情报这个错误了</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1514"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1213">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/23289122?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Alic-yuan
          
        </span>
    
  </header>
  <div class="comment-body">
    还有，我发现一个问题，就是视图函数里面filter后面应该是(tag=tag),这样才行
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1213"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1215">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Alic-yuan
        

  </header>
  <div class="comment-body">
    取决你模型中tag的命名。我在 post 中标签命名为 tags，你可能少了 s，做相应调整即可。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1215"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1222">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/23289122?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Alic-yuan
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    嗯嗯，对
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1222"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1212">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/23289122?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Alic-yuan
          
        </span>
    
  </header>
  <div class="comment-body">
    博主，代码是一样的，我打开详情页，页面的标签里面却没有内容，是哪出了问题
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1212"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1214">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Alic-yuan
        

  </header>
  <div class="comment-body">
    通常来说极有可能是你的代码和示例项目的不同。再仔细对比一下，尤其是不起眼的地方。如果依然发现不了问题，请附上相关代码。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1214"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1223">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/23289122?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Alic-yuan
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    找到问题了，谢谢博主
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">7 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1223"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c752">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/21997474?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mengguiyouziyi
          
        </span>
    
  </header>
  <div class="comment-body">
    请问这个return super(TagView, self).get_queryset().filter(tags=tag)中的tags=tag这个关键字参数，key可以是任意值么？比如abc=tag
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/752"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c755">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mengguiyouziyi
        

  </header>
  <div class="comment-body">
    不可以的，必须是你定义在model 中的属性名。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/755"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c383">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/18455519?v=3"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Ascend2015
          
        </span>
    
  </header>
  <div class="comment-body">
    大神，有些疑惑，为什么我本地的其他静态样式无法用呢？<br />一用就变成光板网页，什么样式都没有
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/383"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c386">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Ascend2015
        

  </header>
  <div class="comment-body">
    你可能需要 static 标签以及正确放置静态文件路径
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/386"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c295">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/7c911183jw1e8qgp5bmzyj2050050aa8.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">杯具的NoNo
          
        </span>
    
  </header>
  <div class="comment-body">
    大神,您是四川的吗?我也是..我看到第五章: 博客首页视图了,,,写的简单明了.太厉害了.<br />谢谢您.
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/295"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c300">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">杯具的NoNo
        

  </header>
  <div class="comment-body">
    嗯，我现在在四川读书，不客气，感谢你的阅读！
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">10 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/300"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
  
</div>
  </section>
</div>
  </div>

    </div>
  </div>
</section>
<footer class="bg-white py-5 mt-5 text-small text-muted">
  <div class="flex-center">
    <div>&copy; 2017 追梦人物的博客</div>
  </div>
  
  
  
</footer>
<script>
    $('[data-menu]').menu();

    var InterValObj; //timer变量，控制时间
    var curCount = 120;//当前剩余秒数

    $('#js-send').on('click', function (event) {
        var $this = $(this);
        var $targetURL = $this.attr('data-target');
        $.post(
            $targetURL,
            {email: $('#id_email').val()},
            function (data) {
                if (data.ok) {
                    $this.attr("disabled", "true");
                    $this.text("重新发送验证码" + "(" + curCount + ")");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $('.message')
                        .find('span')
                        .text(data.msg)
                } else {
                    $('.message').find('span').text(data.msg)
                }
            }
        );
        return false;
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount === 0) {
            window.clearInterval(InterValObj);//停止计时器
            $('#js-send').removeAttr("disabled");//启用按钮
            $('#js-send').text("重新发送验证码");
        }
        else {
            curCount--;
            $('#js-send').text("重新发送验证码" + "(" + curCount + ")");
        }
    }

    $('#js-submit').on('click', function (event) {
        var $this = $(this);
        var $form = $('.email-binding-form');
        var $targetURL = $form.attr('action');
        console.log($targetURL);

        $.post(
            $targetURL,
            {
                email: $('#id_email').val(),
                verification_code: $('#id_verification_code').val()
            },
            function (data) {
                if (data.ok) {
                    location.reload();
                } else {
                    $('.message')
                        .find('span')
                        .text(data.msg)
                }
            }
        );
        return false;
    });


    var editor = new Simditor({
        textarea: $('#id_comment'),
        placeholder: "提出你的见解...",
        toolbarFloat: false,
        cleanPaste: true,
        toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'color',
            'ol',
            'ul',
            'blockquote',
            'code',
            'table',
            'link',
            'image',
            'hr'
        ]
    });
</script>


</body>
</html>